﻿<div id="header">
    <h1 id="logo">
        Easy Monitor</h1>
    <div id="header_buttons">
        <a href="#modal" rel="modal">
            <img src="@Url.Content("~/Content/images/icons/envelope.png")" alt="您有13条消息" />13</a> 
        <a href="#modal2" rel="modal">用户设置</a> 
        <a href="#">退出</a>
    </div>
    <!-- end #header_buttons -->
    <!-- Modal box -->
    <div id="modal">
        <div class="modalbox">
            <div class="modalhead">
                <img src="@Url.Content("~/Content/images/modaltop.png")" alt="Modal arrow" />
                Mailbox
            </div>
            <div class="modalcontent">
                <div class="message">
                    <div class="author">
                        <a href="#">Teun</a></div>
                    <div class="content">
                        This skin can be easily styled!</div>
                    <div class="datetime">
                        16-05 - 08:16</div>
                </div>
                <div class="message">
                    <div class="author">
                        <a href="#">Pieter</a></div>
                    <div class="content">
                        It can also be styled very easily.</div>
                    <div class="datetime">
                        11-05 - 16:27</div>
                </div>
                <div class="message">
                    <div class="author">
                        <a href="#">Jane Doe</a></div>
                    <div class="content">
                        This template uses a lot of nice CSS3 effects.</div>
                    <div class="datetime">
                        10-05 - 18:42</div>
                </div>
            </div>
            <div class="modalfoot">
                <img src="@Url.Content("~/Content/images/icons/newmessage.png")" alt="New message" />
                New message
            </div>
        </div>
    </div>
    <!-- Modal box 2 -->
    <div id="modal2">
        <div class="modalbox">
            <div class="modalhead">
                <img src="@Url.Content("~/Content/images/modaltop.png")" alt="Modal arrow" />
                Mailbox 2
            </div>
            <div class="modalcontent">
                <div class="message">
                    <div class="author">
                        <a href="#">Pieter</a></div>
                    <div class="content">
                        It can also be styled very easily.</div>
                    <div class="datetime">
                        11-05 - 16:27</div>
                </div>
                <div class="message">
                    <div class="author">
                        <a href="#">Jane Doe</a></div>
                    <div class="content">
                        This template uses a lot of nice CSS3 effects.</div>
                    <div class="datetime">
                        10-05 - 18:42</div>
                </div>
            </div>
            <div class="modalfoot">
                <img src="@Url.Content("~/Content/images/icons/newmessage.png")" alt="New message" />
                New message
            </div>
        </div>
    </div>
    <!-- Navigation -->
    <ul id="main-nav">
        <li>@Html.ActionLink("首页", "Index", "Home")</li>
        <li><a href="#">
            <!-- use href="#" to indicate there's a submenu -->
            Content </a>
            <ul>
                <li><a href="#">Pages</a></li>
                <li><a href="#">Articles</a></li>
            </ul>
        </li>
        <li><a href="#">Layout </a>
            <ul>
                <li><a href="#">Edit CSS</a></li>
                <li><a href="#">Manage Themes</a></li>
            </ul>
        </li>
        <li><a href="#" class="current">Users </a>
            <ul>
                <li><a href="#">Permissions</a></li>
                <li><a href="#" class="current">Manage Users</a></li>
                <li><a href="#">Manage Usergroups</a></li>
            </ul>
        </li>
        <li><a href="#">Settings </a>
            <ul>
                <li><a href="#">Account settings</a></li>
                <li><a href="#">Domain settings</a></li>
            </ul>
        </li>
    </ul>
    <!-- end #nav -->
    <h2>
        <img src="@Url.Content("~/Content/images/icons/tools_32.png")" alt="系统设置" />系统设置</h2>
</div>
<!-- end #header -->
